/*
 * 单进度条组件
 * @Author: ljb
 * @Date: 2018-06-06 16:40:13
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-25 17:28:35
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

	.progress {
		display: flex;
		white-space: nowrap;
		align-items: center;
		justify-content: space-between;
		.label {
			width: 55%;
			text-align: right;
			padding-right: 8px;
			display: flex;
			align-items: center;
			.label_name {
				display: inline-block;
				width: 40px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.bar-img {
			width: 100%;
			height: 10px;
			overflow: hidden;
			border-radius: 25px;
			.progress-bar {
				width: 100%;
				height: 10px;
				margin: auto 0;
				border-radius: 25px;
			}
		}
	}
	.bool {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-size: 18px;
		// font-weight: bold;
	}

</style>
<template>

	<div
		:class="showName ? 'bool' : ''"
		:style="{'color' : colors}"
		class="progress">
		<div
			class="label">
			<span :class=" bool ? 'label_name' : '' ">{{ label_name }}</span>
			<span>{{ label }}</span>
			<span>{{ '：' + value + unit }}</span>
		</div>
		<div
			:style="{'background': bgColors[1]}"
			class="bar-img">
			<div
				:class="unit_id"
				class="progress-bar"/>
		</div>
	</div>

</template>

<script>
import { i18n } from 'src/i18n';

export default {
	name: 'Progress',
	props: {
		// 数组，里面颜色仅支持rgb格式
		bgColors: {
			type: Array,
			default() {
				return ['rgb(0, 0, 0)', 'rgba(0, 0, 0, 0.3)'];
			},
		},
		value: {
			type: Number,
			default() {
				return 0;
			},
		},
		minValue: {
			type: Number,
			default() {
				return 0;
			},
		},
		maxValue: {
			type: Number,
			default() {
				return 100;
			},
		},
		// 需要传字符串，px或者百分比
		width: {
			type: String,
			default() {
				return '100%';
			},
		},
		label: {
			type: String,
			default() {
				return '';
			},
		},
		unit: {
			type: String,
			default() {
				return '';
			},
		},
		unitId: {
			type: String,
			required: true,
		},
		label_name: {
			type: String,
			default() {
				return '';
			},
		},
		showName: {
			type: Boolean,
			default() {
				return false;
			},
		},
		colors: {
			type: Array,
			default() {
				return ['rgb(0, 0, 0)'];
			},
		},
	},
	data() {
		return {
			bool: false,
			unit_id: `bar_${this.unitId}`,
		};
	},
	watch: {
		value() {
			this.initProgress();
		},
	},
	mounted() {
		this.initProgress();
	},
	methods: {

		/**
         * 初始化滑条样式
         * @return {undefined}
         */
		initProgress() {
			const progress_bar = document.getElementsByClassName(this.unit_id)[0];

			const percentage = ((this.value - this.minValue) / (this.maxValue - this.minValue)).toFixed(2) * 100;

			const [first_color] = this.bgColors;

			progress_bar.style.background = `${first_color}`;

			progress_bar.style.width = `${percentage}%`;

			// 补充
			if (i18n.locale === 'en-US') {
				this.bool = true;
			}
		},

	},
};
</script>
